<template>
	<view class="shopIn-wrap page-bg">
		<image class="header-bg" src="../../static/item_09.png"></image>
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">商铺名称</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="shopName" type="text" placeholder="请输入商铺名称" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">客服电话</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="servicePhone" type="text" placeholder="请输入客服电话" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group form-group__text">
				<textarea class="form-group__from" v-model="shopIntroduce" placeholder="请简单的介绍下你的店铺" placeholder-class="placeholder" />
			</view>
				<view class="form-group form-group__upload">
			<view class="form-group__title">请上传店铺LOGO</view>
			<view class="form-group__con">
				<view class="upload-item">
					<image class="upload-img" @click="uploadImg" v-if="shopLogo" :src="shopLogo" ></image>
					<image class="upload-img" @click="uploadImg" v-else src="../../static/common/icon_04.png"></image>
					<view class="upload-tip">店铺LOGO</view>
				</view>
			</view>
			</view>
		</view>
				
		<view class="interval"></view>
				<view class="form-wrap" style="display: none;">
					<view class="form-group">
						<view class="form-group__title">联系人</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入联系人" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="form-group">
						<view class="form-group__title">手机号</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入手机号" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="form-group">
						<view class="form-group__title">邮箱</view>
						<view class="form-group__con">
							<input class="form-group__from " type="text" placeholder="请输入邮箱" placeholder-class="placeholder" />
						</view>
					</view>
					
					<view class="form-group form-group__upload">
						<view class="form-group__title">请上传身份证</view>
						<view class="form-group__con">
							<view class="upload-item">
								<image class="upload-img" src="" ></image>
								<view class="uplaod-tip">身份证正面</view>
							</view>
							<view class="upload-item">
								<image class="upload-img" src="" ></image>
								<view class="uplaod-tip">身份证反面</view>
							</view>
						</view>
					</view>
					
					<view class="form-group form-group__upload">
						<view class="form-group__title">请上传营业执照</view>
						<view class="form-group__con">
							<view class="upload-item">
								<image class="upload-img" :src="shopLogo" ></image>
								<view class="uplaod-tip">营业执照</view>
							</view>
						</view>
					</view>
				</view>
				<view class="interval"></view>
		<view class="user-agreel">
			<image class="agreel-icon" src="../../static/common/icon_07_on.png" @click="changeAgreel" v-if='isAgreel'></image>
			<image class="agreel-icon" src="../../static/common/icon_07.png" @click="changeAgreel" v-else></image>
			<view class="agreel-title">我已阅读并了解 <text class="agreel-con" @click="popCenterClose(true)">《商家入驻协议》</text> </view>
		</view>	
		
		<pop-center  :isShow='isShow' :title='titleRules' :text='textRules' @popCenterClose='popCenterClose'></pop-center>
		
		<view class="footer-block"></view>
		
		<view class="page-submit" @click="formSubmit">立即申请入驻</view>
		
	</view>
</template>

<script>
	import popCenter from '../../components/popCenter.vue'
	import common  from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default{
		data() {
			return{
				isAgreel: false,
				isShow: false,
				titleRules: '商家入驻协议',
				textRules: '商家入驻协议',
				
				shopName: '', // 店铺名称
				shopIntroduce: '', // 店铺简介
				shopLogo: '' ,// 店铺LOGO,
				servicePhone: '', // 客服电话
				id: '',
				info: {}
				
			}
		},
		onLoad(options) {
			this.id = options.id || common.defaultId
			this.getInfo()
		},
		methods:{
			getInfo() {
				api.GetShopById({ id: this.id },(res) => {
					 this.info = res || {}
					 this.shopName = res.shopName
					 this.shopIntroduce = res.shopIntroduce
					 this.shopLogo = res.shopLogo
					 this.servicePhone = res.servicePhone
				}) 
			},
			
			getArt() {
				api.getArtByCode({ artCode: common.artCode.sjrzxy }, res => {
					this.titleRules = res.artTitle
					this.textRules = res.artContent
				})
			},
			changeAgreel(res) {
				this.isAgreel = !this.isAgreel
			},
			popCenterClose(status) {
				this.isShow = status
			},
			link(url) {
				this.$link(url)
			},
			uploadImg(res) {
				common.imgUpload(res => {
					console.log(res)
					this.shopLogo = res
				})
			},
			formSubmit() {
				let { isAgreel,shopName,servicePhone,shopIntroduce, shopLogo, id } = this.$data
				if(!isAgreel) { this.$showToast('请勾选商家入驻协议~'); return }
				if(!shopName) { this.$showToast('请填写店铺名称~'); return }
				if(!servicePhone) { this.$showToast('请填写客服电话~'); return }
				if(!shopIntroduce) { this.$showToast('请填写店铺简介~'); return }
				if(!shopLogo) { this.$showToast('请上传店铺LOGO~'); return }
				api.shopApplication({ shopName,servicePhone,shopIntroduce, shopLogo, id }, () => {
					this.$showToast('申请信息提交成功, 等待审核~')
					setTimeout(() => {
						this.$link('/pages/shop/shopInRes')
					}, 2000)
				})
			}
		},
		components:{
			popCenter
		}
	}
</script>

<style scoped lang="less">
@import url('../../app.less');
	.header-bg{
		width: 100%;
		height: 300upx;
		display: block;
	}
	
	.user-agreel{
		padding: 50upx 20upx ;
		box-sizing: border-box;
		.flex-base;
		justify-content: flex-start;
		.agreel-icon{
			width: 30upx;
			height: 30upx;
		}
		.agreel-title{
			.f22;
			margin-left: 10upx;
		}
		.agreel-con{
			color: @font-orange-color;
		}
	}
	
</style>
